<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>XianLin|登录</title>
    <link href="../img/XianLinICO.ico" rel="shortcut icon" type="image/x-icon">
    <!--引入CSS-->
    <link href="../css/login.css" rel="stylesheet">

    <script src="../js/vue.js"></script>
    <link href="../element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="../element-ui/lib/index.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header></el-header>
    </el-container>
    <el-container>
        <el-container>
            <el-aside width="70%"></el-aside>
            <el-main>
                <el-header><h1>登录</h1></el-header>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row>
                        <el-col :span="21">
                            <div class="grid-content bg-purple-dark">
                                <el-form label="QQ">
                                    <!--                    <el-input v-model="form.QQ" placeholder="请输入内容"></el-input>-->
                                    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
                                        <el-form-item
                                                label="QQ"
                                                prop="userQQ"
                                                :rules="[{ required: true, message: 'QQ不能为空'},{ type: 'number', message: 'QQ必须为数字值'}]">
                                            <el-input autocomplete="off" type="userQQ" v-model.number="form.userQQ"
                                                      placeholder="请输入QQ号"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </el-form>
                                <el-form label="密码">
                                    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
                                        <el-form-item
                                                label="密码"
                                                prop="userPassword"
                                                :rules="[{ required: true, message: '密码不能为空'}]">
                                            <el-input autocomplete="off" type="userPassword" v-model="form.userPassword"
                                                      placeholder="请输入密码(并非QQ密码)"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </el-form>
                            </div>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <template>
                            <el-checkbox v-model="loginType">记住我,下次免登陆</el-checkbox>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
<!--                            <el-button type="primary" @click="onSubmit">登录</el-button>-->
                            <el-row>
                                <el-button type="primary" @click="onSubmit" plain>登录</el-button>
                            </el-row>
                            <div>
                                <el-header></el-header>
                                <el-link href="./enroll.html" type="success">没有账号?点我注册</el-link>
                            </div>

                        </el-row>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
        <el-aside width="15%"></el-aside>
    </el-container>

    <!--引入Vue对象-->
    <script src="../js/login.js"></script>
</div>
</body>
</html>